window.addEventListener('load', function () {
    // 轮播图
    // 获取元素
    var focus = document.querySelector('.focus');
    console.log(focus);

    var ul = focus.querySelector('ul');

    var ol = focus.querySelector('ol');
    console.log(ol);


    //获得宽度
    var w = focus.offsetWidth;

    //定时器轮播图片
    var timer; //定时器变量，用于清除和启动
    var index = 0;
    function timing() {
        timer = setInterval(function () {
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all .3s' //过渡效果代替动画效果，动画效果在移动前触发
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000)
    }
    //添加过渡结束监听事件，在过渡结束瞬间判断index
    timing(); //启动自动轮播

    function transtop() {
        var translatex = -index * w;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }

    ul.addEventListener('transitionend', function () {
        //在过渡前监听index
        if (index >= 3) {
            index = 0;
            // 在过渡完的一瞬间去掉动画跳转到第一张

            transtop();
        }

        else if (index < 0) {
            index = 2; //如果时反向自动播放，则跳转到最后一张

            transtop();
        }

        ol.querySelector('.current').classList.remove('current'); //删除current类
        ol.children[index].classList.add('current'); //更新圆点的类
    })


    // 滑动转变轮播图
    var start_x = 0;
    var move_x = 0;
    ul.addEventListener('touchstart', function (e) {

        start_x = e.targetTouches[0].pageX;
        clearInterval(timer);

    });

    ul.addEventListener('touchmove', function (e) {
        move_x = e.targetTouches[0].pageX - start_x; //获取移动的X


        //移动的距离与当前图片的坐标有关，为当前坐标+移动距离
        translatex = -index * w + move_x;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        e.preventDefault(); //阻止拖动屏幕
    });



    ul.addEventListener('touchend', function (e) {
        var move_tag = 0;
        if (Math.abs(move_x) > (focus.offsetWidth / 4)) { move_tag = 1; } //判断是否移动
        else { //否则不移动
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        if (move_tag) { //如果移动，判断移动的方向
            if (move_x > 0) { index--; } else { index++; };
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        timing();  //离开时启动自动轮播

    })


    // news轮播图
    var ul2 = document.querySelector('.rightul');



    //定时器轮播li
    var timer2; //定时器变量，用于清除和启动
    var index2 = 0;
    //获得高度
    var h = ul2.children[0].offsetHeight;
    function timing2() {
        timer2 = setInterval(function () {
            index2++;
            var translatey = -index2 * h;
            ul2.style.transition = 'all 1s' //过渡效果代替动画效果，动画效果在移动前触发

            ul2.children[index2 - 1].style.transition = 'all 1s';
            ul2.style.transform = 'translateY(' + translatey + 'px)';
            ul2.children[index2 - 1].style.opacity = '0';
        }, 3000)
    }
    //添加过渡结束监听事件，在过渡结束瞬间判断index
    timing2(); //启动自动轮播

    function transtop2() {
        var translatey = -index2 * h;
        ul2.style.transition = 'none';
        var i = 0;
        for (; i < ul2.children.length - 1; i++) {
            ul2.children[i].style.transition = 'none';
            ul2.children[i].style.opacity = '1';
        }
        ul2.style.transform = 'translateY(' + translatey + 'px)';
    }

    ul.addEventListener('transitionend', function () {
        //在过渡前监听index
        if (index2 >= 3) {
            index2 = 0;
            // 在过渡完的一瞬间去掉动画跳转到第一张
            transtop2();

        }

    });

    // 刷新按钮
    var change = document.querySelector('.change');
    var refresh = change.querySelector('.refresh');
    var degree = 360;
    var recommend = document.querySelector('.recommend');
    change.addEventListener('click', function () {
        refresh.style.transition = 'all .8s';
        refresh.style.transform = 'rotate(' + degree + 'deg)';
        degree += 360;
    })

    refresh.addEventListener('transitionend', function () {
        new1.del();
        new2.del();
        new4.create();
        new3.create();
    })





    // 刷新的面向对象新闻模块
    function News(headimg, name, title, contenttext, imgs, tag, readnum, likenum, collectnum, sharenum) { //首字母大写
        this.content;
        this.caidan;
        this.caidanlist;
        this.headimg = headimg;
        this.name = name;
        this.title = title;
        this.contenttext = contenttext;
        this.imgs = imgs;
        this.tag = tag;
        this.readnum = readnum;
        this.likenum = likenum;
        this.collectnum = collectnum;
        this.sharenum = sharenum;
        this.footerfunction;
        this.footfunction = function (className, num, ImgUrl1, ImgUrl2) {
            var functionObj = document.createElement('span');
            functionObj.className = className;
            functionObj.innerHTML = '<img src=' + ImgUrl1 + ' alt=""> ' + num;
            this.footerfunction.appendChild(functionObj);
            //功能启动
            var liketag = 1;
            functionObj.addEventListener('click', function () {
                if (liketag) {
                    num = Number(num) + 1;
                    functionObj.innerHTML = '<img src=' + ImgUrl2 + ' alt=""> ' + num;
                    liketag = 0;
                }
                else {
                    num = Number(num) - 1;
                    functionObj.innerHTML = '<img src=' + ImgUrl1 + ' alt=""> ' + num;
                    liketag = 1;
                }

            })

        } //点赞、收藏功能

        this.list = function (caidan, caidanlist) {
            //头像右部菜单功能
            // 加入透明背景
            var body = document.body;
            var backgroundDiv = document.createElement("div");
            backgroundDiv.style.cssText = "left:0;top:0;position:fixed;background:#333;opacity:0.1;width:100%;height:100%";
            // 点击后弹框，背景变为灰色
            caidan.addEventListener('click', function () {
                body.appendChild(backgroundDiv);
                caidanlist.style.display = 'block';
            })

            // 点击空白，收框，背景变回原色
            window.addEventListener('click', function (e) {
                if (e.target == backgroundDiv) {
                    body.removeChild(backgroundDiv);
                    caidanlist.style.display = 'none';
                }
            })
        }  //菜单列表

        this.create = function () {
            //添加content盒子
            this.content = document.createElement('div');
            this.content.className = 'content';
            recommend.appendChild(this.content);
            //添加头像盒子
            var headerimg = document.createElement('div');
            headerimg.className = 'headerimg';
            this.content.appendChild(headerimg);
            //添加头像图片
            var img = document.createElement('img');
            img.src = this.headimg;
            headerimg.appendChild(img);
            //添加名字
            var span = document.createElement('span');
            span.innerHTML = this.name;
            headerimg.appendChild(span);
            //添加内容标题与菜单列表
            var h6 = document.createElement('h6');
            var caidan = document.createElement('img');
            var caidanlist = document.createElement('div');
            caidan.src = "icons/菜单.png";
            caidan.className = "caidan";
            caidanlist.className = 'caidanlist';
            caidanlist.innerHTML = '<div class="caidantriangel"></div><h6>不感兴趣</h6><h6>引起不适</h6><h6>举报投诉</h6>';
            h6.innerHTML = this.title;
            h6.appendChild(caidan);
            h6.appendChild(caidanlist);
            this.content.appendChild(h6);
            this.list(caidan, caidanlist);
            //添加内容
            var p = document.createElement('p');
            p.innerHTML = this.contenttext;
            this.content.appendChild(p);
            //添加图片
            var imgs = document.createElement('div');
            imgs.className = 'img';
            this.content.appendChild(imgs);
            for (var i = 0; i < this.imgs.length; i++) {
                var img = document.createElement('img');
                img.src = this.imgs[i];
                imgs.appendChild(img);
            }
            // 添加标签
            var tag = document.createElement('div');
            tag.className = 'tag';
            tag.innerHTML = '<img src="icons/标签.png" alt="">习俗 <div class="tri">';
            this.content.appendChild(tag);
            // 添加底部功能栏
            this.footerfunction = document.createElement('div');
            this.footerfunction.className = 'function';
            this.content.appendChild(this.footerfunction);
            // 阅读量
            var readNum = document.createElement('span');
            readNum.className = 'readNum';
            readNum.innerHTML = this.readnum + ' 阅读';
            this.footerfunction.appendChild(readNum);
            // 点赞功能
            this.footfunction('like', this.likenum, "icons/喜欢.png", "icons/喜欢2.png");
            // 收藏功能
            // var functionCollect = document.createElement('span');
            // functionCollect.className = 'sotre';
            // functionCollect.innerHTML = '<img src="icons/收藏.png" alt=""> ' + this.collectnum;
            // this.footerfunction.appendChild(functionCollect);
            this.footfunction('sotre', this.collectnum, "icons/收藏.png", "icons/收藏2.png");
            // 转发功能
            var functionShare = document.createElement('span');
            functionShare.className = 'share';
            functionShare.innerHTML = '<img src="icons/转发.png" alt=""> ' + this.sharenum;
            this.footerfunction.appendChild(functionShare);
            // footerfunction.innerHTML = '<span class="readNum">' + this.readnum + ' 阅读</span> <span class="like"> <img src="icons/喜欢.png" alt="">' + this.likenum + '</span><span class="sotre"><img src="icons/收藏.png" alt="">' + this.collectnum + '</span><span class="share"><img src="icons/转发.png" alt="">' + this.sharenum + '</span>';




        }

        this.del = function () {
            if (this.content) {
                // this.content.remove();
                this.content.parentNode.removeChild(this.content);
                console.log(this.content);
            }
        }

        this.show = function () {
            if (this.content) {
                this.content.style.display = 'block';
            }
        }



    }

    var new1 = new News("images/头像.jpg", '民族汇', '云南省25个少数民族习俗录，建议收藏！',
        '云南的彝族中，位于云南中部的楚雄彝族自治州和南部的红河哈尼族彝族自治州，是云南境内彝族人口最为集中的地区。彝族有自己的语言和文字。崇虎、尚黑、敬火、爱武是彝族文化的几个鲜明特点。而彝族的十月太阳历，可与闻名于世的玛雅文明相媲美。',
        ["images/pic1.jpeg", "images/pic2.jpeg", "images/pic3.jpeg"],
        '习俗', '2w', '23', '5', '12');
    var new2 = new News("images/头像.jpg", '民族汇', '云南省翠湖公园一览图+介绍',
        '翠湖，原称“菜海子”，因湖东北有“九泉所出，汇而成池”，故又名“九龙池”。清康熙年间云贵总督范承勋、巡抚王继文于湖中建碧漪亭（俗称海心亭），水光潋滟，绿树成荫。',
        ["images/翠湖1.jpg", "images/翠湖2.jpg", "images/翠湖3.jpg"],
        '旅游', '1.7w', '15', '8', '2');

    var new3 = new News("images/头像.jpg", '民族汇', '云南省25个少数民族习俗录，建议收藏！',
        '云南的彝族中，位于云南中部的楚雄彝族自治州和南部的红河哈尼族彝族自治州，是云南境内彝族人口最为集中的地区。彝族有自己的语言和文字。崇虎、尚黑、敬火、爱武是彝族文化的几个鲜明特点。而彝族的十月太阳历，可与闻名于世的玛雅文明相媲美。',
        ["images/pic1.jpeg", "images/pic2.jpeg", "images/pic3.jpeg"],
        '习俗', '2w', '23', '5', '12');

    var new4 = new News("images/头像.jpg", '民族汇', '云南省翠湖公园一览图+介绍',
        '翠湖，原称“菜海子”，因湖东北有“九泉所出，汇而成池”，故又名“九龙池”。清康熙年间云贵总督范承勋、巡抚王继文于湖中建碧漪亭（俗称海心亭），水光潋滟，绿树成荫。',
        ["images/翠湖1.jpg", "images/翠湖2.jpg", "images/翠湖3.jpg"],
        '旅游', '1.7w', '15', '8', '2');

    new1.create();
    new2.create();

    // //头像右部菜单功能
    // var caidan = document.querySelectorAll('.caidan');
    // var caidanlist = document.querySelectorAll('.caidanlist');
    // // 加入透明背景
    // var body = document.body;
    // var backgroundDiv = document.createElement("div");
    // backgroundDiv.style.cssText = "left:0;top:0;position:fixed;background:#333;opacity:0.1;width:100%;height:100%";
    // var caidanindex;
    // // 点击后弹框，背景变为灰色
    // for (var i = 0; i < caidan.length; i++) {
    //     caidan[i].index = i;
    //     caidan[i].addEventListener('click', function () {
    //         body.appendChild(backgroundDiv);
    //         caidanlist[this.index].style.display = 'block';
    //         caidanindex = this.index;

    //     })
    // }
    // // 点击空白，收框，背景变回原色
    // window.addEventListener('click', function (e) {
    //     if (e.target == backgroundDiv) {
    //         body.removeChild(backgroundDiv);
    //         caidanlist[caidanindex].style.display = 'none';
    //     }
    // })



    //goback模块
    var goback = document.querySelector('.goback');
    var nav = document.querySelector('nav');
    window.addEventListener('scroll', function () {
        if (window.pageYOffset >= nav.offsetTop) {
            goback.style.display = 'block'; //到位置显示
        }
        else { goback.style.display = 'none'; }
    })

    goback.onclick = function () {
        window.scroll(0, 0); //点击后返回顶部
    }





})